<template>
	<div class="tab">
		<router-link tag="div" class="item-tab" to="/recommend">
			<span class="tab-link">
				推荐
			</span>
		</router-link>
		
		<router-link tag="div" class="item-tab" to="/singer">
			<span class="tab-link">
				歌手
			</span>
		</router-link>
		
		<router-link tag="div" class="item-tab" to="/rank">
			<span class="tab-link">
				排行
			</span>
		</router-link>
		
		<router-link tag="div" class="item-tab" to="/search">
			<span class="tab-link">
				搜索
			</span>
		</router-link>
	</div>
</template>

<script type="text/ecmascript-6">
	
export default {
	name: 'Tab'
}
</script>

<style lang="stylus" scoped="scoped">
	@import "~common/stylus/variable.styl"
	.tab
		display: flex;
		justify-content: center;
		height: 44px;
		line-height: 44px;
		font-size: $font-size-medium-x;
		.item-tab
			flex: 1px;
			text-align: center;
			.tab-link
				color: $color-text-l;
			&.router-link-active
				.tab-link
					color: $color-theme;
					border-bottom: 2px solid $color-theme;
</style>